::v-deep .el-drawer__header {
    color: #02102e !important;
}

// ::v-deep .el-drawer__body {}
::v-deep .el-drawer__body::-webkit-scrollbar {
    display: none;
    /* 针对Webkit浏览器 */
}

::v-deep .el-drawer {
    width: 35% !important;
}

.center {

    .lefBox {
        width: 960px;

        .title {
            margin-bottom: 32px;

            .titTop {
                font-size: 28px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: CENTER;
                color: #02102e;
            }

            .time {
                font-size: 12px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: CENTER;
                color: #8590a1;
                margin-top: 12px;
            }
        }

        .avaBox {
            .leftIimg {
                font-size: 14px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #02102e;

                img {
                    width: 24px;
                    height: 24px;
                    border-radius: 12px;
                    margin-right: 8px;

                }
            }

            .rigXin {
                .iconItem {
                    margin-left: 24px;
                    font-size: 12px;
                    font-family: Manrope, Manrope-400;
                    font-weight: 400;
                    text-align: LEFT;
                    color: #8590a1;

                    img {
                        width: 18px;
                        height: 18px;
                        margin-right: 8px;
                    }
                }
            }
        }

        .xian {
            width: 100%;
            border-bottom: 1px solid #eaebee;
            margin: 26px 0 32px 0;
        }

        .weiBox {
            position: relative;
            margin-bottom: 80px;

            .counts {
                height: 900px;
                overflow: hidden;
                line-height: 1.8;
            }

            .price {
                position: absolute;
                width: 100%;
                bottom: -30px;
                left: 0;
                height: 348px;
                background: rgba(247, 247, 249, 0.60);
                backdrop-filter: blur(8px);
                z-index: 999;

                .lefCont {
                    width: 205px;
                    height: 252px;
                    background: #fc00f2;
                    border-radius: 16px;
                    padding: 32px 0;

                    .read {
                        font-size: 20px;
                        font-family: Manrope, Manrope-700;
                        font-weight: 700;
                        text-align: CENTER;
                        color: #ffffff;
                    }

                    .contst {
                        font-size: 12px;
                        font-family: Manrope, Manrope-500;
                        font-weight: 500;
                        text-align: LEFT;
                        color: #ffffff;
                        margin-top: 8px;
                    }

                    .daola {
                        margin-top: 27px;
                        margin-bottom: 27px;
                        font-size: 28px;
                        font-family: Manrope, Manrope-700;
                        font-weight: 700;
                        text-align: CENTER;
                        color: #ffffff;
                    }

                    .btns {
                        font-size: 14px;
                        font-family: Manrope, Manrope-700;
                        font-weight: 700;
                        text-align: center;
                        color: #02102e;
                        width: 141px;
                        height: 36px;
                        line-height: 36px;
                        background: #ffffff;
                        border-radius: 8px;
                    }
                }
            }

            .rigJoin {
                width: 338px;
                height: 252px;
                background: #02102e;
                border-radius: 16px;
                padding: 32px;
                margin-left: 40px;

                .joinName {
                    font-size: 20px;
                    font-family: Manrope, Manrope-700;
                    font-weight: 700;
                    text-align: center;
                    color: #ffffff;
                    margin-bottom: 8px;
                }

                .countss {
                    font-size: 12px;
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: CENTER;
                    color: #ffffff;
                    margin-bottom: 24px;
                }

                .daolaPri {
                    font-size: 20px;
                    font-family: Manrope, Manrope-700;
                    font-weight: 700;
                    text-align: CENTER;
                    color: #ffffff;
                    margin-bottom: 24px;

                    span {
                        font-size: 14px;
                        font-family: Manrope, Manrope-700;
                        font-weight: 700;
                        text-decoration: line-through;
                        text-align: CENTER;
                        color: #ffffff;
                    }
                }

                .botBtn {
                    font-size: 14px;
                    font-family: Manrope, Manrope-700;
                    font-weight: 700;
                    text-align: center;
                    color: #02102e;
                    width: 274px;
                    height: 36px;
                    line-height: 36px;
                    background: #ffffff;
                    border-radius: 8px;
                }
            }

        }

        .yiBox {
            margin-bottom: 80px;

            .countsss {
                line-height: 1.8;
            }
        }
    }

    .rigBox {
        width: 240px;

        .toptit {
            font-size: 16px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            margin-bottom: 24px;
        }

        .boxItem {
            margin-bottom: 26px;

            .img {
                width: 100%;
                height: 180px;
                border-radius: 6px;
                margin-bottom: 14px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .cont {
                font-size: 14px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: LEFT;
                color: #02102e;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                // white-space: nowrap;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                margin-bottom: 8px;
            }

            .timeYarn {
                font-size: 12px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #8590a1;
            }

        }
    }
}

::v-deep .el-drawer__header {
    margin-bottom: 0;
}

.boxResp {
    .topBoxTit {
        font-size: 20px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: LEFT;
        color: #02102e;
        margin-bottom: 20px;
    }

    .xian {
        width: 100%;
        border-bottom: 1px solid #eaebee;
        margin-bottom: 32px;
    }

    .read {
        width: 100%;
        height: 150px;
        background: #f7f7f9;
        border-radius: 16px;
        padding: 25px 32px;

        .topSetle {
            font-size: 16px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            padding-bottom: 24px;


            img {
                width: 20px;
                height: 20px;
                margin-right: 16px;
            }
        }

        .botOn {
            margin-top: 24px;

            .lefPub {
                font-size: 16px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #02102e;
            }

            .rigPric {
                font-size: 20px;
                font-family: Manrope, Manrope-700;
                font-weight: 700;
                text-align: LEFT;
                color: #02102e;
            }
        }
    }

    .botJoin {
        width: 100%;
        background: #f7f7f9;
        border-radius: 16px;
        padding: 30px 32px;
        margin-top: 24px;

        .topSetle {
            font-size: 16px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            padding-bottom: 24px;


            img {
                width: 20px;
                height: 20px;
                margin-right: 16px;
            }
        }

        .ul {
            margin-bottom: 20px;

            .li {
                font-size: 14px;
                font-family: Manrope, Manrope-400;
                font-weight: 400;
                text-align: LEFT;
                color: #02102e;
                margin-bottom: 8px;

                .dian {
                    width: 6px;
                    height: 6px;
                    border-radius: 3px;
                    background-color: #02102e;
                    margin-right: 6px;
                }
            }
        }

        .setMonth {
            .topThon {
                width: 100%;
                background: #ffffff;
                border: 1px solid #eaebee;
                border-radius: 12px;
                padding: 24px;

                .lefPlan {
                    font-size: 16px;
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #02102e;
                }

                .rigmonth {
                    font-size: 16px;
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #02102e;
                }

                .lefDao {
                    font-size: 12px;
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #4260ff;
                }

                .rigDao {
                    font-size: 12px;
                    font-family: Manrope, Manrope-500;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #4260ff;
                }
            }
        }

    }

    .priceZong {
        width: 100%;
        background: #f7f7f9;
        border-radius: 16px;
        margin-top: 24px;
        padding: 24px 32px;

        .topPric {
            font-size: 24px;
            font-family: Manrope, Manrope-700;
            font-weight: 700;
            text-align: LEFT;
            color: #02102e;
            margin-bottom: 12px;
        }

        .urchase {
            font-size: 16px;
            font-family: Manrope, Manrope-500;
            font-weight: 500;
            text-align: LEFT;
            color: #02102e;
        }
    }

    .btn {
        font-size: 16px;
        font-family: Manrope, Manrope-700;
        font-weight: 700;
        text-align: center;
        width: 100%;
        height: 48px;
        line-height: 48px;
        background: #02102e;
        border-radius: 8px;
        color: #ffffff;
        margin-top: 40px;

    }

}

.borAct {
    border: 1px solid #727377 !important;
}